<route lang="json5">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '地图导览',
  },
}
</route>
<template>
  <view class="bg-#F6F6F6 overflow-auto w-100% h-screen box-border" id="agricultural">
    <div class="map">
      <div
        v-if="showMap"
        id="mapDiv"
        ref="mapDiv"
        class="bg-transparent overflow-hidden"
        :style="{ width: `${100 * scales}%`, height: `${100 * scales}%` }"
      >
        <div class="w-100% h-100% pos-absolute top-0% left-0%">
          <div
            id="mapDivBar"
            :style="{ transform: `scale(${scales})` }"
            class="mapDiv-bar pos-absolute bottom-2% w-max left-0% my-0 mx-auto right-0% px-50px py-10px border-rd-30px bg-#fff flex gap-40px items-center z-1000"
          >
            <div
              class="flex flex-col pos-relative justify-center items-center"
              @click="activeBar = 1"
            >
              <img
                class="w-25px h-25px"
                src="../../static/images/SmartAgriculturalTourism/view.png"
                v-if="activeBar === 1"
              />
              <img
                class="w-25px h-25px"
                src="../../static/images/SmartAgriculturalTourism/un-view.png"
                v-else
              />
              <span
                class="text-14px font-black mt-5px whitespace-pre"
                :style="{ color: activeBar === 1 ? '#EE7702' : '#8E8E93' }"
              >
                景点
              </span>
              <div
                v-if="activeBar === 1 && userList.length > 0"
                style="left: -100%"
                class="w-240px h-180px pos-absolute bg-#fff bottom-140% border-rd-20px overflow-hidden flex flex-col"
              >
                <div class="flex-1 overflow-auto newScrollbar">
                  <div
                    v-for="(item, index) in userList"
                    :key="item.id"
                    @click="flyMarker(index)"
                    class="flex items-center justify-center gap-12px py-5px px-20px"
                    :class="{ userActive: userActive === index }"
                  >
                    <span class="w-15px h-15px border-rd-50% bg-#EE7702 inline-block"></span>
                    <span class="flex-1 text-left text-15px font-bold">
                      {{ item.houseNumber }} - {{ item.houseHolder }}
                    </span>
                  </div>
                </div>
              </div>
            </div>
            <div
              class="flex pos-relative flex-col justify-center items-center"
              @click="activeBar = 2"
            >
              <img
                class="w-20px h-20px"
                src="../../static/images/SmartAgriculturalTourism/toilet.png"
                v-if="activeBar === 2"
              />
              <img
                class="w-20px h-20px"
                src="../../static/images/SmartAgriculturalTourism/un-toilet.png"
                v-else
              />
              <span
                class="text-14px font-black color-#8E8E93 mt-5px whitespace-pre"
                :style="{ color: activeBar === 2 ? '#EE7702' : '#8E8E93' }"
              >
                洗手间
              </span>
              <div
                v-if="activeBar === 2 && userList.length > 0"
                class="w-240px h-140px pos-absolute pt-15px bg-#fff overflow-hidden bottom-140% border-rd-20px flex flex-col"
              >
                <div class="flex-1 overflow-auto newScrollbar">
                  <div
                    v-for="(item, index) in userList"
                    :key="item.id"
                    @click="flyMarker(index, item.houseNumber)"
                    class="flex items-center justify-center gap-12px py-5px px-20px"
                    :class="{ userActive: userActive === index }"
                  >
                    <span class="w-15px h-15px border-rd-50% bg-#2A7CFF inline-block"></span>
                    <span class="flex-1 text-left overflow-hidden text-15px font-bold flex">
                      <span>{{ item.houseNumber }}</span>
                      -
                      <span class="ellipsis flex-1">{{ item.houseHolder }}</span>
                    </span>
                  </div>
                </div>
              </div>
            </div>
            <div class="flex flex-col justify-center items-center" @click="activeBar = 3">
              <img
                class="w-25px h-25px"
                src="../../static/images/SmartAgriculturalTourism/park.png"
                v-if="activeBar === 3"
              />
              <img
                class="w-25px h-25px"
                src="../../static/images/SmartAgriculturalTourism/un-park.png"
                v-else
              />
              <span
                class="text-14px font-black color-#8E8E93 mt-5px whitespace-pre"
                :style="{ color: activeBar === 3 ? '#EE7702' : '#8E8E93' }"
              >
                停车场
              </span>
              <div
                v-if="activeBar === 3 && userList.length > 0"
                class="w-180px h-140px pos-absolute pt-15px bg-#fff overflow-hidden bottom-120% right-5% border-rd-20px flex flex-col"
              >
                <div class="flex-1 overflow-auto newScrollbar">
                  <div
                    v-for="(item, index) in userList"
                    :key="item.id"
                    @click="flyMarker(index, item.houseNumber)"
                    class="flex items-center justify-center gap-12px py-5px px-20px"
                    :class="{ userActive: userActive === index }"
                  >
                    <span class="w-15px h-15px border-rd-50% bg-#EE2A02 inline-block"></span>
                    <span class="flex-1 text-left overflow-hidden text-15px font-bold flex">
                      <span>{{ item.houseNumber }}</span>
                      -
                      <span class="ellipsis flex-1">{{ item.houseHolder }}</span>
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            v-if="userInfoShow"
            id="mapDivInfo"
            :style="{
              transform: `scale(${scales})`,
              height: currentType === 1 ? '400px' : '200px',
            }"
            class="mapDiv-info flex flex-col top-0% mx-0 border-rd-10px bg-#fff my-auto left-2% bottom-0% w-340px bg-#03479F pos-absolute z-1000"
          >
            <div class="mapDiv-users newScrollbar flex-1 p-20px overflow-auto">
              <div>
                <img width="100%" :src="state.detailInfo.imgPath" />
                <div style="font-size: 18px">{{ state.detailInfo.content || '' }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </view>
</template>

<script lang="ts" setup>
import * as getApi from '../../service/TouristReview/index'
import activeBtn from '../../static/images/SmartAgriculturalTourism/activeBtn.png'
import unActiveBtn from '../../static/images/SmartAgriculturalTourism/unActiveBtn.png'
import viewPoint from '../../static/images/SmartAgriculturalTourism/viewPoint.png'
import tioletPoint from '../../static/images/SmartAgriculturalTourism/tioletPoint.png'
import parkPoint from '../../static/images/SmartAgriculturalTourism/parkPoint.png'
import view from '../../static/images/SmartAgriculturalTourism/view.png'
import toilet from '../../static/images/SmartAgriculturalTourism/toilet.png'
import park from '../../static/images/SmartAgriculturalTourism/park.png'
import b11 from '../../static/images/SmartAgriculturalTourism/b1-1.png'
import b12 from '../../static/images/SmartAgriculturalTourism/b1-2.png'
import b13 from '../../static/images/SmartAgriculturalTourism/b1-3.png'
import b14 from '../../static/images/SmartAgriculturalTourism/b1-4.png'
import b15 from '../../static/images/SmartAgriculturalTourism/b1-5.png'
import b16 from '../../static/images/SmartAgriculturalTourism/b1-6.png'
import b17 from '../../static/images/SmartAgriculturalTourism/b1-7.png'
import b18 from '../../static/images/SmartAgriculturalTourism/b1-8.png'
import b19 from '../../static/images/SmartAgriculturalTourism/b1-9.png'
import b21 from '../../static/images/SmartAgriculturalTourism/b2-1.png'
import b31 from '../../static/images/SmartAgriculturalTourism/b3-1.png'
import { useDebounce } from '@vueuse/core'

const state = reactive({
  currentActive: {},
  detailInfo: {
    content: '',
    imgPath: null,
  },
})

const scales = ref(1)
const houseHolder = ref()
const mapDiv = ref()
const userInfoShow = ref(false)
const showMap = ref(true)
const activeBar = ref()
const markers = ref([])
const popups = ref([])
const userList = ref([])
const userActive = ref()
const currentType = ref(null)
const bottomBarData = {
  1: {
    data: [
      {
        id: 1,
        houseHolder: '游客服务中心',
        houseNumber: '1',
        imgPath: b11,
        location: '-108.34362709463744,105.610974989389',
        content:
          '在美丽的数字乡村，游客中心宛如一颗璀璨的明珠，迎接八方来客。这座游客中心是进入数字乡村的重要门户，外观设计独具特色，融合了现代科技与乡村自然之美。建筑线条流畅，大面积的玻璃幕墙让室内外空间相互交融，采光充足的同时，也为游客提供了广阔的视野，可尽情欣赏乡村的如画美景。走进游客中心，首先映入眼帘的是宽敞明亮的大厅。数字化展示区运用先进的多媒体技术，以生动形象的方式呈现数字乡村的发展历程、特色产业、人文风情以及未来规划。在这里，你可以通过高清触摸屏、互动投影等设备，深入了解乡村的每一个角落，感受数字科技为乡村带来的翻天覆地的变化。游客咨询服务台随时为您提供热情周到的服务。专业的工作人员会耐心解答您关于旅游线路、景点特色、餐饮住宿等方面的问题，并为您提供详细的旅游地图和指南。无论是独自旅行还是团队出游，都能在这里获得贴心的帮助。游客中心还设有舒适的休息区，配备了柔软的座椅和免费的无线网络。您可以在这里稍作休息，整理行囊，或者与亲朋好友分享旅途中的美好瞬间。同时，这里也提供一些特色的乡村纪念品和手工艺品，让您可以把数字乡村的美好记忆带回家。在数字乡村游客中心，您将开启一段充满惊喜与感动的乡村之旅，体验数字科技与传统乡村的完美融合，留下难忘的回忆。',
      },
      {
        id: 2,
        houseHolder: '农产品展销中心',
        houseNumber: '2',
        imgPath: b12,
        location: '-105.34362709463744,95.610974989389',
        content:
          '在数字乡村的建设蓝图中，农产品展销中心犹如一颗璀璨的明珠，闪耀着独特的光芒。这里是乡村与城市、传统与现代、农业与科技完美融合的舞台。农产品展销中心汇聚了来自广袤乡村大地的丰富物产，从颗粒饱满的谷物到新鲜欲滴的水果，从香气四溢的茶叶到营养丰富的特色干货，每一件农产品都承载着农民的辛勤汗水和对美好生活的期盼。步入展销中心，宽敞明亮的空间、整洁有序的布局让人眼前一亮。现代化的展示设施，如高清电子显示屏、互动触摸屏等，生动地展示着农产品的生长环境、种植过程以及独特的营养价值。通过数字技术，消费者可以实时了解农产品的溯源信息，确保购买到安全、放心的优质产品。这里不仅是一个销售场所，更是一个交流与合作的平台。农产品展销中心积极与电商平台、物流企业合作，打通农产品销售的 “最后一公里”，让乡村的美味能够快速抵达城市的餐桌。同时，举办各类农产品展销会、推介会，为农民专业合作社、农业企业提供展示和推广的机会，促进乡村产业的发展壮大。在数字乡村农产品展销中心，传统农业与数字科技碰撞出绚丽的火花，为乡村振兴注入了新的活力。这里，见证着乡村的发展与变迁，传递着大地的馈赠与温暖，成为连接乡村与世界的重要桥梁。',
      },
      {
        id: 3,
        houseHolder: '中心广场',
        houseNumber: '3',
        imgPath: b13,
        location: '-102.34362709463744,103.610974989389',
        content:
          '在数字乡村的核心地带，坐落着一处充满活力与现代气息的中心广场。这里是乡村生活的新焦点，融合了传统乡村的质朴与数字时代的创新。广场地面铺设着整齐美观的环保地砖，在阳光的照耀下熠熠生辉。中心位置矗立着一座具有象征意义的数字雕塑，以抽象的线条和独特的造型展现着数字乡村的发展理念与未来憧憬。环绕广场四周，是精心布置的景观绿化带，四季常青的绿植与色彩斑斓的花卉交相辉映，为广场增添了一抹自然的生机与美丽。长椅和凉亭错落分布，为村民们提供了休憩之所，无论是老人在阳光下闲聊，还是年轻人在忙碌之余享受片刻宁静，这里都是绝佳的选择。而真正让这个广场与众不同的，是其融入的数字元素。广场上配备了大型高清数字显示屏，实时播放着乡村新闻、农业技术讲座、文化活动预告等内容，成为村民们获取信息的重要窗口。智能照明系统根据时间和环境自动调节亮度，既节能环保又营造出舒适的氛围。无线网络覆盖整个广场区域，村民们可以在这里随时随地连接网络，与外界保持紧密联系，分享乡村生活的点滴美好。数字乡村中心广场不仅是一个休闲娱乐的场所，更是乡村文化交流、信息传播和数字发展的重要平台。它见证着乡村的变迁与进步，承载着村民们对美好生活的向往与追求。',
      },
      {
        id: 4,
        houseHolder: '农耕文化主题广场',
        houseNumber: '4',
        imgPath: b14,
        location: '-85.34362709463744,100.610974989389',
        content:
          '在数字乡村的画卷中，农耕文化主题广场宛如一颗璀璨的明珠，承载着乡村的历史记忆与深厚底蕴。这个广场是传统农耕文明与现代数字技术的完美融合。步入广场，首先映入眼帘的是古朴而庄重的传统农具展示区。犁、耙、锄头、镰刀等农具静静陈列，仿佛在诉说着往昔岁月里农民们辛勤耕耘的故事。每一件农具都镌刻着岁月的痕迹，见证了乡村的变迁与发展。广场中央，一座巨大的耕牛雕塑栩栩如生，它象征着勤劳与坚韧，是农耕文化的重要象征。雕塑周围，以数字化展示手段呈现的农耕场景，让人们仿佛穿越时空，回到了过去的农田里，感受着农民们日出而作、日落而息的生活节奏。沿着广场的小径前行，数字农耕文化长廊令人眼前一亮。这里通过高清显示屏和互动触摸屏，展示着乡村农业发展的历程、传统农耕技艺以及现代农业的创新成果。你可以在这里了解到农作物的种植过程、养殖技术的演变，还能通过虚拟现实技术亲身体验田间劳作的乐趣。在农耕文化主题广场，还有专门的农事体验区。游客们可以在这里参与传统的农事活动，如插秧、收割、打谷等，亲身感受农耕的辛苦与喜悦。同时，数字技术的应用也为农事体验增添了新的乐趣，通过手机 小程序 可以记录自己的农事体验过程，分享给亲朋好友。这个农耕文化主题广场不仅是一个展示乡村文化的窗口，更是一个连接过去与未来的桥梁。它让人们在数字时代依然能够铭记农耕文化的价值，传承和弘扬农民的勤劳、智慧和坚韧精神，为数字乡村的发展注入了独特的文化魅力。',
      },
      {
        id: 5,
        houseHolder: '梅兰竹菊四舍',
        houseNumber: '5',
        imgPath: b15,
        location: '-82.14090733973549,93.6596194109817',
        content:
          '以下是一段关于梅兰竹菊四舍民宿的介绍文字：在数字乡村的画卷中，梅兰竹菊四舍民宿宛如一颗璀璨的明珠，散发着独特的魅力。梅舍，傲雪凌霜，如冬日里的一抹暖阳。踏入其中，典雅的装饰风格尽显高洁之韵。温暖的色调、精致的摆件，让人仿佛置身于梅花盛开的宁静世界，感受那份坚韧与优雅。兰舍，淡雅清幽，似山谷中的一缕微风。这里的每一处细节都流露出清新脱俗之美。简洁的布置、舒适的家具，营造出一种宁静致远的氛围，如同兰花般散发着淡淡的芬芳。竹舍，挺拔翠绿，若山林间的一片翠绿。以竹为主题的装饰元素，赋予了空间自然的活力。阳光透过竹帘洒下，光影交错间，仿佛能听到竹子在微风中摇曳的沙沙声，让人尽享自然之趣。菊舍，灿烂绚丽，像秋日里的一片花海。色彩斑斓的装饰与菊花的艳丽相得益彰。宽敞明亮的空间、温馨的布局，为宾客带来如同置身于菊花海洋般的愉悦感受。梅兰竹菊四舍民宿，不仅是一处休憩之所，更是数字乡村中的一道亮丽风景线。在这里，你可以远离城市的喧嚣，沉浸在大自然的怀抱中，感受数字乡村带来的便捷与宁静。无论是与家人共度温馨时光，还是与朋友畅享悠闲假期，梅兰竹菊四舍民宿都将为你留下难忘的回忆。',
      },
      {
        id: 6,
        houseHolder: '烧烤园',
        houseNumber: '6',
        imgPath: b16,
        location: '-113.67316826219395,100.34718753235765',
        content:
          '在数字乡村的画卷中，烧烤园宛如一颗璀璨的明珠，为乡村生活增添了一抹独特的魅力。我们的烧烤园坐落于风景秀丽的乡村一隅，周边绿树成荫，空气清新，远离城市的喧嚣与繁华，让你尽情沉浸在大自然的怀抱之中。烧烤园拥有宽敞舒适的场地，可同时容纳众多游客。精心布置的桌椅和遮阳伞，为你提供惬意的用餐环境。园内配备专业的烧烤设施，干净整洁且操作便捷，无论你是烧烤达人还是新手小白，都能在这里轻松享受烧烤的乐趣。食材方面，我们坚持选用新鲜、绿色的本地农产品，从鲜嫩多汁的羊肉串到香气四溢的蔬菜串，每一口都饱含着乡村的质朴与美味。同时，我们还提供丰富多样的饮品选择，让你在品尝美食的同时，尽情畅饮，放松身心。在这里，你不仅可以享受美味的烧烤，还能与亲朋好友共度欢乐时光。孩子们可以在周边的草地上嬉戏玩耍，大人们则可以围坐在一起，聊天畅谈，感受乡村生活的宁静与美好。数字乡村的烧烤园，是美食与自然的完美结合，是亲子互动、朋友聚会的理想之地。快来这里，开启一场难忘的乡村烧烤之旅吧！',
      },
      {
        id: 7,
        houseHolder: '鲜食采摘园',
        houseNumber: '7',
        imgPath: b17,
        location: '-80.69865223553576,65.8722561987046',
        content:
          '在数字乡村的画卷中，鲜果采摘园犹如一颗璀璨的明珠。这里是大自然与现代乡村建设的美妙融合之地。走进鲜果采摘园，郁郁葱葱的果树整齐排列，挂满了色泽鲜艳、形态饱满的各类鲜果。无论是红彤彤的苹果、黄澄澄的梨子，还是紫莹莹的葡萄，都散发着诱人的果香。采摘园中的水果均采用生态种植方式，不施化肥、不打农药，确保每一颗果实都安全、健康、美味。在这里，游客们可以亲身体验采摘的乐趣。提着篮子，穿梭在果树之间，挑选自己喜爱的水果，感受着田园生活的宁静与美好。采摘园还设有休息区和农产品展示区，游客们可以在休息的同时，品尝新鲜的水果，了解当地的特色农产品。',
      },
      {
        id: 7,
        houseHolder: '微田园',
        houseNumber: '8',
        imgPath: b18,
        location: '-48.962343656248756,89.97348183850058',
        content:
          '微田园是数字乡村中一道独特的风景线。它以农户的庭院为基础，打造出一个个小巧精致的田园景观。在微田园中，农户们利用闲置的土地种植各种蔬菜、花卉和水果。这里有绿油油的青菜、红彤彤的西红柿、五颜六色的花卉，构成了一幅美丽的田园画卷。微田园不仅为农户提供了新鲜的农产品，还美化了庭院环境，提升了乡村的整体风貌。为了更好地管理微田园，农户们可以借助数字化工具。通过手机 小程序，农户们可以了解蔬菜的种植方法、病虫害防治知识等。同时，小程序还可以提供天气预报、市场价格等信息，帮助农户们合理安排种植计划，提高农产品的产量和质量。微田园还可以成为乡村旅游的一部分。游客们可以参观农户的微田园，了解乡村生活和农业文化。农户们也可以通过销售自己种植的农产品和手工艺品，增加收入，促进乡村经济的发展。',
      },
      {
        id: 7,
        houseHolder: '智慧果园',
        houseNumber: '9',
        imgPath: b19,
        location: '-47.14865488019882,102.45985756331201',
        content:
          '智慧果园是数字乡村建设中的科技典范。它利用先进的物联网、大数据、人工智能等技术，实现了果园的智能化管理。在智慧果园中，每一棵果树都安装了传感器，实时监测土壤湿度、温度、养分含量等数据。这些数据通过无线网络传输到中央控制系统，系统根据数据分析结果，自动调节灌溉、施肥等操作，确保果树始终处于最佳生长状态。果园还配备了智能监控系统，对果园的环境和果树的生长情况进行实时监控。果农们可以通过手机或电脑随时随地查看果园的情况，及时发现并处理病虫害等问题。同时，智能监控系统还可以对果园的安全进行监控，防止盗窃和破坏行为的发生。',
      },
    ],
    imgUrl: viewPoint,
    color: '#EE7702',
  },
  2: {
    data: [
      {
        id: 1,
        houseHolder: '洗手间',
        houseNumber: '01',
        imgPath: b21,
        location: '-113.51939168333011,105.29565507388445',
      },
      {
        id: 2,
        houseHolder: '洗手间',
        houseNumber: '02',
        imgPath: b21,
        location: '-100.761029258703,111.9134342080345',
      },
      {
        id: 3,
        houseHolder: '洗手间',
        houseNumber: '03',
        imgPath: b21,
        location: '-69.30291014307834,51.978830728939585',
      },
      {
        id: 4,
        houseHolder: '洗手间',
        houseNumber: '04',
        imgPath: b21,
        location: '-63.14512954432662,86.22075698346285',
      },
    ],
    imgUrl: tioletPoint,
    color: '#2A7CFF',
  },
  3: {
    data: [
      {
        id: 1,
        houseHolder: '停车场',
        houseNumber: '01',
        imgPath: b31,
        location: '-111.07832535518031,111.29408828223777',
      },
      {
        id: 2,
        houseHolder: '停车场',
        houseNumber: '02',
        imgPath: b31,
        location: '-119.52049847482488,87.47995336921514',
      },
      {
        id: 3,

        houseHolder: '停车场',
        houseNumber: '03',
        imgPath: b31,
        location: '-75.51480054824071,55.30621388715558',
      },
    ],
    imgUrl: parkPoint,
    color: '#EE2A02',
  },
}
const mapRef = ref(null)

watch(
  () => activeBar.value,
  (New, Old) => {
    // map.setZoom(2)
    resetMap()
    setTimeout(() => {
      initMarker(New)
    }, 1000)
  },
  { deep: true },
)

const resetLeaflet = () => {
  const leftResultDiv = document.getElementById('mapDivBar') // 获取div的dom

  setTimeout(() => {
    leftResultDiv.onmouseover = function () {
      // 监听鼠标移入

      Window.map.dragging.disable() // 地图拖拽
      Window.map.doubleClickZoom.disable() // 禁止双击放大地图
      Window.map.scrollWheelZoom.disable() // 禁止鼠标滑轮滚动放大缩小地图
    }
  }, 0)
  setTimeout(() => {
    leftResultDiv.onmouseout = function () {
      Window.map.dragging.enable() // enable  开启
      Window.map.doubleClickZoom.enable()
      Window.map.scrollWheelZoom.enable()
    }
  }, 0)
}

const resetLeaflet1 = () => {
  const leftResultDiv1 = document.getElementById('mapDivInfo')
  setTimeout(() => {
    leftResultDiv1.onmouseover = function () {
      // 监听鼠标移入
      Window.map.on('click', (e) => {
        userInfoShow.value = true
      })
      Window.map.dragging.disable() // 地图拖拽
      Window.map.doubleClickZoom.disable() // 禁止双击放大地图
      Window.map.scrollWheelZoom.disable() // 禁止鼠标滑轮滚动放大缩小地图34
    }
  }, 0)
  setTimeout(() => {
    leftResultDiv1.onmouseout = function () {
      // 监听鼠标移入
      Window.map.on('click', (e) => {
        userInfoShow.value = false
      })
      Window.map.dragging.enable() // enable  开启
      Window.map.doubleClickZoom.enable()
      Window.map.scrollWheelZoom.enable()
    }
  }, 0)
}

const resetMap = (type) => {
  //
  Window.map.flyTo([-120.55341785290629, 171.15625], 4, {
    duration: 1, // 动画时长，单位秒
  })

  Window.map.off('popupopen')
  markers.value.forEach((item, mIndex) => {
    item.remove()
  })
  popups.value.forEach((item, PIndex) => {
    item.remove()
  })

  markers.value = []
  popups.value = []
  if (!type) {
    houseHolder.value = undefined
    userList.value = []
  }
  userInfoShow.value = false
  userActive.value = null
}

// 手绘图初始化
function initMap() {
  Window.map = L.map('mapDiv', {
    minZoom: 3,
    zoomControl: false,
    attributionControl: false,
    crs: L.CRS.Simple,
  })
  const layer = L.tileLayer
    .zoomify('/h5/static/handDrawn/{g}/{z}-{x}-{y}.jpg', {
      width: 9925,
      height: 9130,
      attribution:
        '&copy; NASA, ESA, M. Robberto and the Hubble Space Telescope Orion Treasury Project Team',
    })
    .addTo(Window.map)
  // 设置边界值
  Window.map.fitBounds([
    [0, 150],
    [-142, 0],
  ])
  Window.map.setMaxBounds([
    [0, 150],
    [-142, 0],
  ])
  Window.map.on('drag', function () {
    Window.map.panInsideBounds(
      [
        [0, 150],
        [-142, 0],
      ],
      { animate: true },
    )
  })
  Window.map.on('zoom', function () {
    Window.map.panInsideBounds(
      [
        [0, 150],
        [-142, 0],
      ],
      { animate: true },
    )
  })
  Window.map.on('click', (e) => {
    userInfoShow.value = false
  })

  L.Popup.prototype._animateZoom = function (e) {
    if (!this._map) {
      return
    }
    const pos = this._map._latLngToNewLayerPoint(this._latlng, e.zoom, e.center)
    const anchor = this._getAnchor()
    L.DomUtil.setPosition(this._container, pos.add(anchor))
  }

  const originalInitTile = L.GridLayer.prototype._initTile
  L.GridLayer.include({
    _initTile: function (tile) {
      originalInitTile.call(this, tile)
      const tileSize = this.getTileSize()
      tile.style.width = tileSize.x + 1 + 'px'
      tile.style.height = tileSize.y + 1 + 'px'
    },
  })

  resetLeaflet()
  // Window.map.addControl(new L.Control.Fullscreen())
  // Window.map.on('fullscreenchange', function () {
  //   if (Window.map.isFullscreen()) {
  //   } else {
  //     console.log('exited fullscreen')
  //   }
  // })
}
async function initMarker(type, houseHolder) {
  currentType.value = type
  const points = bottomBarData[type].data
  const color = bottomBarData[type].color
  const ImgUrl = bottomBarData[type].imgUrl
  userList.value = bottomBarData[type].data

  points.forEach((item, index) => {
    if (item.location) {
      let location = null
      let info = null
      location = item.location.split(',')
      info = item
      const marker1 = L.marker([location[0], location[1]], {
        icon: L.icon({
          iconUrl: ImgUrl, // 标点图标地址
          iconSize: [35, 37], // 图标大小
        }),
        id: item,
      }).on('click', (e) => {
        // 点击事件
        userInfoShow.value = false
        Window.map.off('popupopen')
        const popup = popups.value[index]
        if (popup.options.type) {
          const info = popups.value[index].options.info
          popup.remove()
          popup.options.offset = [0, -5]
          popup.setContent(
            `<div
							style="cursor: pointer; background: #fff;  border-radius: 30px"
						>
							<div
								style="background:${color};color:#fff;padding:5px 15px;border-radius:20px;font-size:12px"
							>
								${info.houseNumber}-${info.houseHolder}
							</div>
						</div>`,
          )
          popup.options.type = 0
          popup.openOn(Window.map)
        } else {
          const info = popups.value[index].options.info
          popup.remove()
          Window.map.on('popupopen', () => {
            document.getElementById(`but${info.houseNumber}`).onclick = async () => {
              bottomBarData[currentType.value].data.forEach((bData) => {
                if (bData.houseNumber === info.houseNumber) {
                  state.detailInfo.imgPath = bData.imgPath
                  state.detailInfo.content = bData.content
                }
              })
              userInfoShow.value = true
              nextTick(() => {
                resetLeaflet1()
              })
            }
          })
          popup.setContent(
            `<div style='background:#fff;padding:10px 20px;border-radius:10px;display: flex;
							flex-direction: column;
							gap: 10px;
							align-items: center;'><div style='color:#000;border-radius:20px;font-size:16px;display:flex;align-items: center;gap: 10px;'><img style='width:40px;height:40px' src=${ImgUrl}><span style='font-weight: bold;font-size:20px'> ${
                info.houseNumber
              }-${info.houseHolder}</span></div><div style='display: ${
                currentType.value !== 2 ? 'block' : 'none'
              };    border: 2px solid ${color};
							color: ${color};
							font-size: 16px;
							padding: 2px 20px;
							border-radius: 10px;
						cursor: pointer;
							}' id='but${info.houseNumber}'>${currentType.value !== 2 ? '更多+' : ''}</div> </div>`,
          )

          popup.options.offset = [-5, -10]
          popup.options.type = 1
          popup.openOn(Window.map)
        }
      })

      marker1.addTo(Window.map)

      const popup = L.popup({
        autoClose: false,
        closeOnClick: false,
        closeButton: false,
        offset: [0, -5],
        type: 0,
        info: item,
      })

        .setLatLng([location[0], location[1]])
        .setContent(
          `<div
						style="cursor: pointer; background: #fff; padding: 5px; border-radius: 30px"
					>
						<div
							style="background:${color};color:#fff;padding:5px 15px;border-radius:20px;font-size:12px"
						>
							${info.houseNumber}-${info.houseHolder}
						</div>
					</div>`,
        )

        .openOn(Window.map)

      markers.value.push(marker1)
      popups.value.push(popup)
    }
  })
  Window.map.invalidateSize(true)
}
function flyMarker(index, num) {
  userActive.value = index
  let info = null
  let color = null
  let ImgUrl = null
  if (activeBar.value === 1) {
    info = userList.value[index]
    color = '#EE7702'
    ImgUrl = view
  } else {
    activeBar.value === 2 ? (color = '#2A7CFF') : (color = '#EE2A02')
    activeBar.value === 2 ? (ImgUrl = toilet) : (ImgUrl = park)
    info = userList.value[index]
    index = markers.value.map((item) => item.options.id.houseNumber).indexOf(num)
  }

  Window.map.off('popupopen')
  markers.value.forEach((item, mIndex) => {
    item.remove()
  })
  popups.value.forEach((item, PIndex) => {
    item.remove()
  })
  Window.map.on('popupopen', () => {
    document.getElementById(`but${info.houseNumber}`).onclick = async () => {
      const imgPath = null
      bottomBarData[currentType.value].data.forEach((bData) => {
        if (bData.houseNumber === info.houseNumber) {
          state.detailInfo.imgPath = bData.imgPath
          state.detailInfo.content = bData.content
        }
      })
      userInfoShow.value = true
      nextTick(() => {
        resetLeaflet1()
      })
    }
  })
  popups.value[index].setContent(
    `<div style='background:#fff;padding:10px 20px;border-radius:10px;display: flex;
			flex-direction: column;
			gap: 10px;
			align-items: center;'><div style='color:#000;border-radius:20px;font-size:16px;display:flex;align-items: center;gap: 10px;'><img style='width:40px;height:40px' src=${ImgUrl}><span style='font-weight: bold;font-size:20px'> ${
        info.houseNumber
      }-${info.houseHolder}</span></div><div style='display: ${
        currentType.value !== 2 ? 'block' : 'none'
      };    border: 2px solid ${color} ;
			color: ${color};
			font-size: 16px;
			padding: 2px 20px;
			border-radius: 10px;
		cursor: pointer;
			}' id='but${info.houseNumber}'>${currentType.value !== 2 ? '更多+' : ''}</div> </div>`,
  )

  popups.value[index].options.offset = [-5, -10]
  popups.value[index].options.type = 1
  markers.value[index].addTo(Window.map)
  popups.value[index].openOn(Window.map)

  Window.map.flyTo(markers.value[index].getLatLng(), 5, {
    duration: 3, // 动画时长，单位秒
  })
}
function getScale() {
  useDebounce(() => {
    const el = document.getElementById('agricultural')
    if (!el) return
    const st = window.getComputedStyle(el)
    const tr = st.transform !== 'none' ? st.transform : 'matrix(1, 0, 0, 1, 0, 0)'
    // 如果不是以 matrix(...) 的形式存在，尝试通过 split 方法解析
    const parts = tr.split('matrix(')
    if (parts.length < 2) return
    const matrixValues = parts[1].split(')')[0].split(',')
    if (matrixValues.length < 6) return
    const a = matrixValues[0]
    const b = matrixValues[1]
    const scale = Math.sqrt(a * a + b * b)
    scales.value = scale
  }, 500)
}

// 测试 uni API 自动引入
onReady(() => {
  getScale()
  nextTick(() => {
    initMap()
  })
  window.addEventListener('resize', getScale)
})
onUnload(() => {
  window.removeEventListener('resize', getScale)
})
</script>

<style scoped lang="scss">
.map {
  width: 100%;
  height: 100%;
  overflow: hidden;
  &-img {
    width: auto;
    height: 100%;
  }
}
:deep(.leaflet-popup-content-wrapper) {
  padding: 0;
}

:deep(.leaflet-popup-content-wrapper) {
  padding: 0;
  background: transparent;
}

:deep(.leaflet-popup-content) {
  width: max-content !important;
  margin: 0;
}

:deep(.leaflet-popup-tip-container) {
  display: none;
}
</style>
